<template>
  <section class="starWrap_0313">
    <span class="starItem_0313" :class="{'redStar': item <= iNow}"  v-for="item in arrStar" @click="changeStar(item)"></span>
  </section>
</template>

<script>
export default {
  data () {
    return {
      arrStar: [1,2,3,4,5],
      
    }
  },
  props:{
    iNow:{
      default:0
    },
    ischeck:{
      default:true
    }

  },
  methods: {
    changeStar(i){
      if(this.ischeck){
        this.iNow = i;
      }
      this.$emit('changeStar', i);
    },
  }
}

</script>
<style lang="less" scoped>
.starWrap_0313 {
  display: flex;
  align-items: center;
  .starItem_0313 {
    display: block;
    width: .33rem;
    height: .33rem;
    margin-right: .17rem;
    background: url("../../assets/img/expert/icon_Staroff@3x.png") center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .redStar {
    background: url("../../assets/img/expert/icon_staron@3x.png") center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

</style>


